<template>
	<view class="page">
		<z-paging ref="paging" v-model="goodsList" @query="queryList">
			<template #top>
				<custom-navbar title="首页" :leftIcon="false" :leftIconSize="0"></custom-navbar>
				<view class="padding-lr-default search-box mb-20rpx">
					<up-search
						@search="handleSearch"
						searchIcon="scan"
						placeholder="寻找宝贝"
						:clearabled="true"
						:showAction="false"
						:animation="true"
						v-model="searchValue"
					></up-search>
				</view>
			</template>
			<up-swiper
				:list="swiperList"
				previousMargin="30"
				nextMargin="30"
				circular
				:autoplay="false"
				radius="5"
				bgColor="#ffffff"
			></up-swiper>
			<view class="mt20-rpx">
				<up-notice-bar text="好消息，好消息，好消息，好消息，好消息"></up-notice-bar>
			</view>
			<template #refresher="{ refresherStatus }">
				<custom-refresher :status="refresherStatus" />
			</template>
			<template #loadingMoreNoMore>
				<custom-nomore />
			</template>
			<view class="padding-lr-default">
				<!-- 商品区域 -->
				<goods-list-item :goodsList="goodsList"></goods-list-item>
			</view>
			<custom-tabbar :index="0" />
		</z-paging>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, onBeforeMount } from 'vue'
import { goodsListApi } from '@/api/index.js'
import swiper3 from '@/static/images/swiper3.png'
import swiper2 from '@/static/images/swiper2.png'
import swiper1 from '@/static/images/swiper1.png'
// swiper
const swiperList = ref([swiper3, swiper2, swiper1])
// 搜索
const searchValue = ref('')
const handleSearch = () => {
	uni.navigateTo({
		url: `/pages/search/search?searchValue=${searchValue.value}`
	})
}
// 商品列表
const goodsList = ref([])
const paging = ref(null)
const queryList = (pageNo, pageSize) => {
	const params = {
		currentPage: pageNo,
		pageSize: pageSize
	}
	goodsListApi(params)
		.then((res) => {
			paging.value.complete(res.records)
			// console.log(goodsList.value);
		})
		.catch((res) => {
			paging.value.complete(false)
		})
}
onLoad(() => {})
</script>

<style lang="scss" scoped>
.search-box {
	.u-search {
		flex: initial;
	}
}
</style>
